<template>
  <div>
    <el-dialog class="pick-dialog" title="绑定手机" append-to-body :visible.sync="dialogVisible" :close-on-click-modal="false" width="1360px" top="30vh">

      <div class="" v-loading="loading">
        <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="68px">
          <el-form-item label="类型" prop="num">
            <el-radio-group v-model="queryParams.zulinType" @input="zulinTypeChange">
              <el-radio :label="1">我的卡位</el-radio>
              <el-radio :label="2" v-if="checkPermi(['phoneManage:wozude'])">共享的卡位</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="手机号" prop="tel">
            <el-input v-model="queryParams.tel" placeholder="请输入手机号" clearable size="small" />
          </el-form-item>
          <el-form-item label="编号" prop="num">
            <el-input v-model="queryParams.num" placeholder="请输入编号" clearable size="small" />
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button type="success" icon="el-icon-plus" @click="openAdd">新增</el-button>
          </el-form-item>
        </el-form>
        <div class="tip">请双击手机号进行选择！</div>
        <template v-if="queryParams.zulinType==1">
          <el-table border ref="table1" :key="1" :data="tableData.records" highlight-current-row height="520px" style="width: 100%" @current-change="handleCurrentChange" @cell-dblclick="dbClick">
            <el-table-column prop="num" label="编号" width="100"></el-table-column>
            <el-table-column prop="num" label="卡位类型" width="95">
              <template slot-scope="scope">
                <el-tag v-if="queryParams.zulinType==1" :type="commonMaps.telDeviceType[scope.row.deviceType||1].type">{{commonMaps.telDeviceType[scope.row.deviceType||1].label}}</el-tag>
                <el-tag v-if="queryParams.zulinType==2" :type="commonMaps.telDeviceType[2].type">{{commonMaps.telDeviceType[2].label}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="tel" label="手机号" width="110"></el-table-column>
            <el-table-column prop="tel" label="核对状态" width="80">
              <template slot-scope="scope">
                <span style="cursor: pointer;">
                  <el-tag :type="commonMaps.kaweiHeduiTypeMap[scope.row.heduiState||'0'].type">{{ commonMaps.kaweiHeduiTypeMap[scope.row.heduiState||'0'].label }}</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="todayCot" label="今日使用次数" width="100"></el-table-column>
            <el-table-column prop="" label="腾讯" width="110">
              <template slot-scope="scope">
                <div class="yibangding" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[1]">
                  <template v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[1].carrierStatus==1">
                    <div class="link" @click="tanchuangceng(getCarrierTypeToObj(scope.row.carrierTypeVoList)[1].content, getCarrierTypeToObj(scope.row.carrierTypeVoList)[1].name)">
                      已绑定: {{getCarrierTypeToObj(scope.row.carrierTypeVoList)[1].count}}
                    </div>
                    <div class="tag">
                      {{ getEndTime(getCarrierTypeToObj(scope.row.carrierTypeVoList)[1]) }}
                    </div>
                    <div style="color: #666;">
                      {{ `180天绑定${scope.row.daysCot||0}次` }}
                    </div>
                  </template>
                  <template v-else>
                    <el-tag type="warning" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[1].carrierStatus==2">未共享</el-tag>
                    <el-tag type="danger" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[1].carrierStatus==3">已共享</el-tag>
                  </template>

                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="网易" width="110">
              <template slot-scope="scope">
                <div class="yibangding" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[2]">
                  <template v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[2].carrierStatus==1">
                    <div class="link" @click="tanchuangceng(getCarrierTypeToObj(scope.row.carrierTypeVoList)[2].content, getCarrierTypeToObj(scope.row.carrierTypeVoList)[2].name)">
                      已绑定: {{getCarrierTypeToObj(scope.row.carrierTypeVoList)[2].count}}
                    </div>
                    <div class="tag">
                      {{ getEndTime(getCarrierTypeToObj(scope.row.carrierTypeVoList)[2]) }}
                    </div>
                  </template>
                  <template v-else>
                    <el-tag type="warning" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[2].carrierStatus==2">未共享</el-tag>
                    <el-tag type="danger" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[2].carrierStatus==3">已共享</el-tag>
                  </template>

                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="米哈游" width="110">
              <template slot-scope="scope">
                <div class="yibangding" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[3]">
                  <template v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[3].carrierStatus==1">
                    <div class="link" @click="tanchuangceng(getCarrierTypeToObj(scope.row.carrierTypeVoList)[3].content, getCarrierTypeToObj(scope.row.carrierTypeVoList)[3].name)">
                      已绑定: {{getCarrierTypeToObj(scope.row.carrierTypeVoList)[3].count}}
                    </div>
                    <div class="tag">
                      {{ getEndTime(getCarrierTypeToObj(scope.row.carrierTypeVoList)[3]) }}
                    </div>
                  </template>
                  <template v-else>
                    <el-tag type="warning" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[3].carrierStatus==2">未共享</el-tag>
                    <el-tag type="danger" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[3].carrierStatus==3">已共享</el-tag>
                  </template>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="" label="steam" width="110">
              <template slot-scope="scope">
                <div class="yibangding" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[5]">
                  <template v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[5].carrierStatus==1">
                    <div class="link" @click="tanchuangceng(getCarrierTypeToObj(scope.row.carrierTypeVoList)[5].content, getCarrierTypeToObj(scope.row.carrierTypeVoList)[5].name)">
                      已绑定: {{getCarrierTypeToObj(scope.row.carrierTypeVoList)[5].count}}
                    </div>
                    <div class="tag">
                      {{ getEndTime(getCarrierTypeToObj(scope.row.carrierTypeVoList)[5]) }}
                    </div>
                  </template>
                  <template v-else>
                    <el-tag type="warning" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[5].carrierStatus==2">未共享</el-tag>
                    <el-tag type="danger" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[5].carrierStatus==3">已共享</el-tag>
                  </template>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="" label="其他" width="110">
              <template slot-scope="scope">
                <div class="yibangding" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[4]">
                  <template slot-scope="scope">
                    <div class="yibangding" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[4]">
                      <template v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[4].carrierStatus==1">
                        <div class="link" @click="tanchuangceng(getCarrierTypeToObj(scope.row.carrierTypeVoList)[4].content, getCarrierTypeToObj(scope.row.carrierTypeVoList)[5].name)">
                          已绑定: {{getCarrierTypeToObj(scope.row.carrierTypeVoList)[4].count}}
                        </div>
                        <div class="tag">
                          {{ getEndTime(getCarrierTypeToObj(scope.row.carrierTypeVoList)[4]) }}
                        </div>
                      </template>
                      <template v-else>
                        <el-tag type="warning" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[4].carrierStatus==2">未共享</el-tag>
                        <el-tag type="danger" v-if="getCarrierTypeToObj(scope.row.carrierTypeVoList)[4].carrierStatus==3">已共享</el-tag>
                      </template>
                    </div>
                  </template>

                </div>
              </template>
            </el-table-column>

            <!-- <el-table-column prop="gameStr" label="绑定游戏" min-width="150">
            <template slot-scope="scope">
              <div class="bangding-box" v-if="scope.row.carrierTypeVoList">
                <div class="bditem" v-for="item in scope.row.carrierTypeVoList" :key="item.id" @click="tanchuangceng(item.content, item.name)">
                  <span>{{item.name}}</span>
                  <span>{{item.count}}</span>
                </div>
              </div>
              <div v-else>暂无</div>
            </template>
          </el-table-column> -->
            <el-table-column prop="remark" label="设备状态" width="80">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.deviceStatus==1" type="success">在线</el-tag>
                <el-tag v-if="scope.row.deviceStatus==2" type="danger">离线</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="绑定记录" prop="qtCount">
              <template #default="{ row }">
                <div style="color: #169bd5;cursor: pointer;" @click="viewRecord(row)">
                  查看记录
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="custodian" label="保管人" width="100"></el-table-column>
            <el-table-column v-if="queryParams.zulinType==1" prop="telType" label="运营商" width="80"></el-table-column>
            <el-table-column prop="remark" label="备注">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top-start">
                  <div class="zdy-des">{{ scope.row.remark }}</div>
                </el-tooltip>
              </template>
            </el-table-column>

          </el-table>
        </template>
        <template v-if="queryParams.zulinType==2">
          <el-table border ref="table2" :key="2" :data="tableData.records" highlight-current-row height="520px" style="width: 100%" @current-change="handleCurrentChange" @cell-dblclick="dbClick">
            <el-table-column prop="tel" label="手机号"></el-table-column>
            <el-table-column prop="todayCot" label="今日使用次数"></el-table-column>
            <el-table-column prop="" label="运营商">
              <template slot-scope="scope">
                <template v-if="carrierTypes&&carrierTypes[1]">
                  <span :key="scope.row.id" :style="{color:colors[scope.row.carrierType]}">
                    {{carrierTypes[scope.row.carrierType].name}}
                  </span>
                </template>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="绑定商品数">
              <template slot-scope="scope">
                <span class="bangding" @click="tanchuangceng(scope.row.content, carrierTypes[scope.row.carrierType].name)">{{scope.row.count||0}}</span>
              </template>
            </el-table-column>

            <el-table-column prop="remark" label="设备状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.deviceStatus==1" type="success">在线</el-tag>
                <el-tag v-if="scope.row.deviceStatus==2" type="danger">离线</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="绑定记录" prop="qtCount">
              <template #default="{ row }">
                <div style="color: #169bd5;cursor: pointer;" @click="viewRecord(row)">
                  查看记录
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="zulinfangName" label="管理方"></el-table-column>
            <el-table-column prop="expireTime" label="到期时间"></el-table-column>
            <!-- <el-table-column prop="remark" label="备注">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top-start">
                  <div class="zdy-des">{{ scope.row.remark }}</div>
                </el-tooltip>
              </template>
            </el-table-column> -->

          </el-table>
        </template>
        <div class="pages-box">
          <el-pagination @current-change="pageChange" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 30, 40, 50, 60]" :page-size="queryParams.pageSize" layout="total, prev, pager, next, jumper" :total="tableData.total"></el-pagination>
        </div>
        <div class="center">
          <el-button @click="close('ruleForm')">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        </div>
      </div>
      <addDialog ref="addDialog" @add="getList"></addDialog>
    </el-dialog>

    <!-- 系列弹窗 -->
    <el-dialog class="diologs" append-to-body :title="names" :visible.sync="dialogVisiblese" width="800px">
      <div style="min-height: 300px;">
        <el-tabs v-model="activeName">
          <el-tab-pane v-for="(item, index) in xilie" :key="index" :label="item.name+'('+item.list.length+')'" :name="''+index">
            <div class="twos" style="color: #1abc9c">
              {{ '绑定的账号' }}
            </div>
            <div class="twos" v-for="(item1, index1) in item.list" :key="index1">
              {{ item1 }}
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
    <!-- 绑定记录弹窗 -->
    <viewRecordsDialog ref="viewRecordsDialog"></viewRecordsDialog>
  </div>
</template>

<script>
import phoneApi from "@/api/phoneManage";
import gameListApi from "../../../api/gameConfig/gameList";
import addDialog from "../tools/phoneManage/components/add";
import viewRecordsDialog from "../tools/phoneManage/components/viewRecords";
import { getTenantPushSettingsByTenantId } from "@/api/system/shopManage";
export default {
  name: "selectPhone",
  components: { addDialog, viewRecordsDialog },
  data() {
    return {
      colors: [
        "red",
        "green",
        "FFB52B",
        "#6c5dd2",
        "red",
        "green",
        "FFB52B",
        "#6c5dd2",
      ],
      activeName: "0",
      listOne: [],
      dialogVisiblese: false,
      dialogVisible: false,
      names: "",
      xilie: [],
      loading: false,
      gameTypes: ["手机", "手机卡"],
      gameInfo: "",
      tableData: {
        records: [],
        total: 0,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        zulinType: 1,
        status: 1,
      },
      currentRow: null,
      nameyouxi: "",
      lengQueObj: {},
    };
  },
  created() {
    this.getLengQue();
  },
  computed: {
    carrierTypes() {
      return this.arrayToObject(this.$store.getters.gameYunyingshangList, "id");
    },
    shopInfo() {
      return this.$store.getters.shopInfo;
    },
    // // 计算当前列的数据
    getCarrierTypeToObj() {
      return (val) => {
        if (val && val.length) {
          return this.arrayToObject(val, "id");
        } else {
          return [];
        }
      };
    },
    // 计算冷却期剩余
    getEndTime() {
      return (val) => {
        if (!this.lengQueObj[val.id]) {
          return "";
        }
        if (!val.maxCreateTime) {
          return "";
        }
        let result = "";
        const now = new Date();
        const start = new Date(val.maxCreateTime);
        if (start) {
          const days = Number(this.lengQueObj[val.id]);
          if (days > 0) {
            // 计算时间差（毫秒）
            const timeDiff = now.getTime() - start.getTime();
            if (timeDiff > 0) {
              // 将毫秒转换为天数（1天 = 24 * 60 * 60 * 1000毫秒）
              const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
              const shengyu = days - daysDiff;
              if (shengyu > 0) {
                result = `冷却剩余${shengyu}天`;
              }
              // if (shengyu > 0 && shengyu <=1) {
              //   result = `即将结束冷却`;
              // }
            }
          }
        }
        return result;
      };
    },
  },
  methods: {
    // 获取手机号冷却时间
    getLengQue() {
      if (this.shopInfo) {
        getTenantPushSettingsByTenantId({
          tenantId: this.shopInfo.tenantId,
          type: 6, //6 手机号冷却设置
        }).then((res) => {
          if (res.data && res.data.settingsJson) {
            this.lengQueObj = JSON.parse(res.data.settingsJson);
          }
        });
      }
    },
    //
    getOnes(list, i) {
      this.listOne = list;
      this.nameyouxi = i;
    },
    //系列弹层
    tanchuangceng(row, i) {
      if (row.length == 0) {
        this.dialogVisiblese = false;
        this.$message({
          message: "暂未绑定！",
          type: "warning",
        });
        return;
      }
      this.dialogVisiblese = true;
      this.xilie = row;
      this.listOne = row[0].list;
      this.nameyouxi = row[0].name;
      this.names = i;
    },
    async open(gameInfo) {
      this.gameInfo = { ...gameInfo };
      console.log(
        "%c Line:361 🍯 this.gameInfo",
        "color:#7f2b82",
        this.gameInfo
      );
      this.dialogVisible = true;
      await this.getGameInfo();
      this.getList();
    },
    // 查看换绑记录
    viewRecord(row) {
      this.$refs.viewRecordsDialog.open(row.tel);
    },
    // 打开新增弹窗
    openAdd() {
      this.$refs.addDialog.open();
    },
    // 改变类
    async zulinTypeChange(e) {
      console.log("%c Line:374 🍞 e", "color:#4fff4B", e);
      this.queryParams.pageNum = 1;
      this.tableData.records = [];

      this.$nextTick(() => {
        if (e == 1) {
          // 重载table1
          this.$refs.table1.doLayout();
        } else if (e == 2) {
          // 重载table2
          this.$refs.table2.doLayout();
        }
        this.getList();
      });
    },
    // 获取列表
    async getList() {
      this.loading = true;
      if (this.queryParams.zulinType == 1) {
        this.queryParams.carrierType = "";
        this.queryParams.zulinEnable = "";
        this.queryParams.chuzufangEnable = "";
        this.queryParams.todayCot = "2";
        const response = await phoneApi.getList(this.queryParams);
        this.tableData.records = response.rows;
        this.tableData.total = response.total;
        this.loading = false;
      } else {
        // 租赁的列表  要传游戏运营商 zulinEnable chuzufangEnable
        this.queryParams.carrierType = this.gameInfo.carrierType;
        this.queryParams.zulinEnable = 1;
        this.queryParams.chuzufangEnable = 1;
        const response = await phoneApi.telLeaseDetailslist(this.queryParams);
        this.tableData.records = response.rows;
        this.tableData.total = response.total;
        this.loading = false;
      }
    },
    // 查询游戏详情
    async getGameInfo() {
      const res = await gameListApi.getGameDetail(this.gameInfo.id);
      this.gameInfo = { ...res.data };
    },
    // 页码改变
    pageChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;
      this.getList();
    },
    // 双击直接选择
    dbClick(row) {
      this.currentRow = row;
      this.submitForm();
    },
    // 选择项改变
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    submitForm() {
      if (!this.currentRow) {
        return this.$alert("请选择一条记录！");
      }
      this.$emit("change", this.currentRow);
      this.close();
    },
    close() {
      this.tableData.records = [];
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.tip {
  color: red;
}
.twos {
  width: 100%;
  padding: 11px 20px;
  border: 1px solid #f2f2f2;
}
.bangding-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .bditem {
    margin-right: 20px;
    cursor: pointer;
    color: $primary;
    &:last-child {
      margin-right: 0;
    }
  }
}
.yibangding {
  text-align: center;
  .red {
    color: red;
  }
  .tag {
    background-color: #f49600;
    font-size: 12px;
    line-height: 22px;
    border-radius: 11px;
    color: #fff;
  }
}
</style>
